<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">小区名称:</div>
        <div class="input-item">
          <a-select
            show-search
            ref="select"
            style="width: 100%"
            placeholder="请填写小区名称"
            :filter-option="false"
            @search="get_all_community"
            @change="get_all_build"
            v-model="queryParam.rentalNeighbourhoodId"
          >
            <a-select-option v-for="(item, index) in community_list" :key="index" :value="item.id" :label="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap" style="width: 160px">
        <div class="label" style="min-width: 34px">楼号:</div>
        <div class="input-item">
          <a-select
            ref="select"
            allowClear
            v-model="queryParam.rentalBuildingId"
            placeholder="请选择"
            @change="get_all_unit"
            :disabled="build_disable"
          >
            <a-select-option v-for="(item, index) in build_list" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap" style="width: 160px">
        <div class="label" style="min-width: 34px">单元:</div>
        <div class="input-item">
          <a-select
            ref="select"
            allowClear
            v-model="queryParam.rentalUnitId"
            placeholder="请选择"
            @change="get_all_floor"
            :disabled="unit_disable"
          >
            <a-select-option v-for="(item, index) in unit_list" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap" style="width: 160px">
        <div class="label" style="min-width: 34px">楼层:</div>
        <div class="input-item">
          <a-select
            ref="select"
            allowClear
            v-model="queryParam.rentalFloorId"
            placeholder="请选择"
            @change="get_all_house"
            :disabled="floor_disable"
          >
            <a-select-option v-for="(item, index) in floor_list" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap" style="width: 160px">
        <div class="label" style="min-width: 34px">房号:</div>
        <div class="input-item">
          <a-select
            ref="select"
            allowClear
            v-model="queryParam.rentalHouseId"
            placeholder="请选择"
            @change="update_force"
            :disabled="house_disable"
          >
            <a-select-option v-for="(item, index) in house_list" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">姓名:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.houseOwnerName" placeholder="请填写房主姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">联系方式:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.houseOwnerMobile" placeholder="请填写房主联系方式" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">身份证号:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.houseOwnerIdCard" placeholder="请填写房主身份证号" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">添加时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery(queryParam.startTime, queryParam.endTime)" type="primary">
          搜索
        </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template #houseAddr="record">
          <img
            @click="open_in_map(record)"
            style="margin-right: 5px; cursor: pointer"
            src="@/assets/imgs/community/location.png"
          />
          <a-tooltip placement="top">
            <template slot="title">
              {{ record.houseAddr }}
            </template>
            {{ record.houseAddr }}
          </a-tooltip>
        </template>
        <template v-slot:action="records">
          <span class="operation deatil-color" v-has="'bank:detail'" @click="detailHandle(records)">详情 </span>
        </template>
      </a-table>
    </div>
    <cus-map ref="cusMap"></cus-map>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import { getAction } from '@/api/manage'
import cusMap from '../modules/map'
export default {
  name: 'visitor-alreadyVisited',
  components: { startEndTime, cusMap },
  // comMethods
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId: {
      handler(v) {
        this.queryParam.policeAgencyId = v.id ? v.id : ''
        this.reset_cascade()
        this.get_all_community() // * 查询当前层级下的小区
        this.searchQuery()
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      url: {
        list: '/rental/house/page?status=1',
        tree: true,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '房屋位置',
          scopedSlots: { customRender: 'houseAddr' },
          // dataIndex: 'houseAddr',
          ellipsis: true,
          width: 300,
          align: 'center',
        },
        {
          title: '所属辖区',
          dataIndex: 'policeJurisdictionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '房东姓名',
          dataIndex: 'houseOwnerName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'houseOwnerMobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '身份证号',
          width: 200,
          dataIndex: 'houseOwnerIdCard',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '添加民警',
          dataIndex: 'policeName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '添加时间',
          width: 200,
          dataIndex: 'addTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
      publicVisible: false,
      disableMixinCreated: true,

      community_list: [],
      build_disable: true,
      build_list: [],
      unit_disable: true,
      unit_list: [],
      floor_disable: true,
      floor_list: [],
      house_disable: true,
      house_list: [],
    }
  },
  mounted() {},
  methods: {
    async get_all_community() {
      let { policeAgencyId } = this.queryParam
      let params = { policeAgencyId, pageSize: 999999 }
      let { result } = await getAction('/rental/house/select_type', params)
      this.community_list = result
    },

    async get_all_build(parentId) {
      this.build_disable = false
      let { policeAgencyId } = this.queryParam
      let params = { policeAgencyId, pageSize: 999999, parentId, type: 2 }
      let { result } = await getAction('/rental/house/select_type', params)
      this.build_list = result
    },

    async get_all_unit(parentId) {
      this.unit_disable = false
      let { policeAgencyId } = this.queryParam
      let params = { policeAgencyId, pageSize: 999999, parentId, type: 3 }
      let { result } = await getAction('/rental/house/select_type', params)
      this.unit_list = result
    },

    async get_all_floor(parentId) {
      this.floor_disable = false
      let { policeAgencyId } = this.queryParam
      let params = { policeAgencyId, pageSize: 999999, parentId, type: 4 }
      let { result } = await getAction('/rental/house/select_type', params)
      this.floor_list = result
    },

    async get_all_house(parentId) {
      this.house_disable = false
      let { policeAgencyId } = this.queryParam
      let params = { policeAgencyId, pageSize: 999999, parentId, type: 5 }
      let { result } = await getAction('/rental/house/select_type', params)
      this.house_list = result
    },

    reset_cascade() {
      this.community_list = []
      this.build_disable = true
      this.build_list = []
      this.unit_disable = true
      this.unit_list = []
      this.floor_disable = true
      this.floor_list = []
      this.house_disable = true
      this.house_list = []
      this.queryParam.rentalNeighbourhoodId = undefined
      this.queryParam.rentalBuildingId = undefined
      this.queryParam.rentalUnitId = undefined
      this.queryParam.rentalFloorId = undefined
      this.queryParam.rentalHouseId = undefined
    },

    update_force() {
      this.$forceUpdate()
    },

    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },

    searchReset() {
      this.reset_cascade()
      this.get_all_community()
      let { policeAgencyId } = this.queryParam
      this.queryParam = {}
      this.queryParam.policeAgencyId = policeAgencyId
      this.resetTime = true
      this.loadData(1)
    },

    open_in_map(record) {
      this.$refs.cusMap.show(record)
    },

    detailHandle(records) {
      this.$router.push({
        path: '/rental/modules/detailModel',
        query: { id: records.id, type: 1, isShowRightCard: true },
      })
    },
  },
}
</script>
